$f: 19.2;


.home {
  .banner {
    margin-top: 98/$f+vw;
    position: relative;

    &::before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .3);
    }

    img {
      width: 100%;
      display: block;
      object-fit: cover;
    }

    .text {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 100%;
      text-align: center;
      transform: translate(-50%, -50%);
      color: #FFF;
      font-size: 60/$f+vw;
      line-height: 1;
      font-weight: 500;
    }
  }

  .main {
    margin: 160/$f+vw 260/$f+vw 102/$f+vw 260/$f+vw;

    .recommend {
      width: 100%;
      position: relative;

      .swiper1 {
        width: 100%;

        a {
          display: flex;
          justify-content: space-between;

          .pic {
            overflow: hidden;
            img {
              width: 756/$f+vw;
              height: 568/$f+vw;
              display: block;
              object-fit: cover;
              transition: all 600ms;
            }
          }

          .text {
            width: 601/$f+vw;

            .time {
              color: #707070;
              font-size: 20/$f+vw;
              margin: 72/$f+vw 0 28/$f+vw 0;
            }

            .t {
              color: #000;
              font-size: 36/$f+vw;
              font-weight: 500;
              margin-bottom: 35/$f+vw;
              transition: all 600ms;
            }

            .des {
              color: #333;
              font-size: 20/$f+vw;
              line-height: 1.5;
            }
          }
          &:hover{
            .pic{
               img{
                transform: scale(1.05);
               }
            }
            .text{
              .t{
                color:#1A53F0;
              }
            }
          }
        }
      }

      .swiper-pagination {
        position: absolute;
        left: 799/$f+vw;
        bottom: 60/$f+vw;

        .swiper-pagination-bullet {
          width: 6px;
          height: 6px;
          background: #E5E5E5;
          transition: all 600ms;
          opacity: 1;
          margin-right: 10/$f+vw;
          z-index: 10;
        }

        .swiper-pagination-bullet-active {
          background: #1A53F0;
        }
      }
    }

    .types {
      margin: 166/$f+vw 0 45/$f+vw 0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .l {
        display: flex;

        .item {
          color: #000;
          font-size: 24/$f+vw;
          line-height: 0.95;
          border-bottom: 2/$f+vw solid transparent;
          padding-bottom: 12/$f+vw;
          transition: all 600ms;
          cursor: pointer;

          &:not(:last-child) {
            margin-right: 80/$f+vw;
          }
        }

        .on {
          border-color: #1A53F0;
        }
      }

      .search {
        display: flex;

        input {
          width: 487/$f+vw;
          height: 48/$f+vw;
          padding: 13/$f+vw 12/$f+vw;
          border: 1px solid rgba(0, 0, 0, 0.10);
          border-right: none;
          color: #000;
          font-size: 16/$f+vw;

          &::placeholder {
            color: rgba(0, 0, 0, 0.60);
          }
        }

        .btn {
          display: flex;
          width: 96/$f+vw;
          height: 48/$f+vw;
          padding: 11/$f+vw 0px;
          justify-content: center;
          align-items: center;
          gap: 10/$f+vw;
          border-radius: 0px 4/$f+vw 4/$f+vw 0px;
          background: #1A53F0;
          color: white;
          font-size: 16/$f+vw;
          cursor: pointer;
        }
      }
    }

    .list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 60/$f+vw 40/$f+vw;
      a {
        display: block;
        width: 100%;
        .pic {
          width: 100%;
          overflow: hidden;
          img {
            width: 100%;
            display: block;
            object-fit: cover;
            transition: all 600ms;
          }
        }

        .text {
          background: #F1F3F9;
          padding: 30/$f+vw 9/$f+vw 30/$f+vw 20/$f+vw;
          width: 100%;
          .p1 {
            color: #000;
            font-size: 20/$f+vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 400/$f+vw;
            font-weight: 500;
            transition: all  600ms;
          }
          .des{
            margin: 16/$f+vw 0;
            color: rgba(0, 0, 0, 0.60);
            font-size: 16/$f+vw;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
          }
          .time{
            color: rgba(0, 0, 0, 0.40);
            font-size: 14/$f+vw;
          }
        }
        &:hover{
          .pic{
            img{
              transform: scale(1.05);
            }
          }
          .text{
            .p1{
              color:#1A53F0;
            }
          }
        }
      }
    }
    .pager{
      display: flex;
      justify-content:center;
      margin-top: 40/$f+vw;
      .prev{
        svg{
          width: 40/$f+vw;
          display: block;
        }
      }
      .nums{
        display: flex;
        a{
          margin: 0 10.5/$f+vw;
          display: flex;
          width: 40/$f+vw;
          height: 40/$f+vw;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
        }
        .on{
          background: #1A53F0;
          color:white;
        }
      }
    }
  }
  @media screen and (max-width: 1024px){
    .banner{
      margin-top: 60px;
      .text{
        font-size:24px;
      }
    }
    .main{
      margin: 20px 5% 60px 5%;
      .recommend{
        .swiper1{
          a{
            flex-direction: column;
            .pic{
                img{
                  width: 100%;
                  height: auto;
                }
            }
             .text{
              width: 100%;
              .time{
                font-size:16px;
                margin: 15px 0 5px 0;
              }
              .t{
                font-size: 20px;
                margin-bottom: 10px;
                line-height: 1.5;
              }
              .des{
                font-size: 16px;
              }
             }
          }
        }
        .swiper-pagination{
          position: static;
          left: 0;
          bottom:0;
          width: 100%;
          .swiper-pagination-bullet{
            margin-right: 10px;
          }
        }
      }
      .types{
        margin: 60px 0 15px 0;
        flex-direction: column;
        .l{
          width: 100%;
          .item{
            font-size: 16px;
            padding-bottom: 10px;
            &:not(:last-child){
              margin-right: 15px;
            }
          }
        }
        .search{
          width: 100%;
          margin-top: 15px;
          input{
            width: 80%;
            height: 40px;
            padding: 12px;
            font-size: 16px;
          }
          .btn{
            width: 20%;
            height: 40px;
            font-size: 16px;
          }

        }
      }
      .list{
        display: block;
        a{
          margin-bottom: 15px;
          .text{
            padding: 15px;
            .p1{
              font-size: 20px;
              width: 100%;
            }
            .des{
              margin: 8px 0;
              font-size: 16px;
            }
            .time{
              font-size: 14px;
            }
          }
        }
      }
      .pager{
        margin-top: 30px;
        .prev{
          svg{
            width: 30px;
            height: auto;
          }
        }
        .nums{
          a{
            margin: 0 10px;
            width: 30px;
            height: 30px;
          }
        }
      }
    }
  }
}